function sum(sales){
    var y=0
    for(var i=0;i<sales.length;i++){
        y+=sales[i]

    }
    return y
}
function sales_province(){
$.ajax({
type:"GET",
url:"/sales_province",
//dataType:"json",
success:function(result){
data=result.data
var province=[];
	var sales=[];
	var profit=[];
	for (i=0;i<data.length;i++){
		province.push(data[i].province)
		sales.push(parseFloat(data[i].sales))
		profit.push(parseFloat(data[i].profit))
	}
//	console.log([province,sales,profit]);
//添加总销售额的数据,用于在图表上方显示
	var sales_total=Math.round(sum(sales)/10000);
	//将数据整理为地图的数据
	var sales_province=[];
	var profit_province=[];
	for(i=1;i<province.length;i++){
		sales_set={};
		profit_set={};
		sales_set['name']=province[i];
		sales_set['value']=sales[i];
		profit_set['name']=province[i];
		profit_set['value']=profit[i];
		sales_province.push(sales_set);
		profit_province.push(profit_set);
	};
//	console.log([sales_province,profit_province])
	var myChart = echarts.init(document.getElementById('data_province'));
	var mapName = 'china'
	var geoCoordMap = {};
	/*获取地图数据*/
	myChart.showLoading();
	var mapFeatures = echarts.getMap(mapName).geoJson.features;
	myChart.hideLoading();
	mapFeatures.forEach(function(v) {
	    // 地区名称
	    var name = v.properties.name;
	    // 地区经纬度
	    geoCoordMap[name] = v.properties.cp;

	});
	var max = 480,
	    min = 9; // todo
	var maxSize4Pin = 100,
	    minSize4Pin = 20;

	var convertData = function(data) {
	    var res = [];
	    for (var i = 0; i < data.length; i++) {
	        var geoCoord = geoCoordMap[data[i].name];
	        if (geoCoord) {
	            res.push({
	                name: data[i].name,
	                value: geoCoord.concat(data[i].value),
	            });
	        }
	    }
	    return res;
	};
	option = {
//			backgroundColor: '#013954',
	    tooltip: {
	        padding: 0,
	        enterable: true,
	        transitionDuration: 1,
	        textStyle: {
	            color: '#000',
	            decoration: 'none',
	        },
	        formatter: function(params) {
		            var tipHtml = '';
		            tipHtml = '<div style="width:180px;height:120px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
		            +'<div style="width:90%;height:30px;line-height:30px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 10px">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:30px;">'+'</i>'
		            +'<span style="margin-left:10px;color:#fff;font-size:16px;">'+params.name+'</span>'+'</div>'
		            +'<div style="padding:10px">'
		            +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
		            +'销售额：'+'<span style="color:#11ee7d;margin:0 6px;">'+sales_province[params.dataIndex].value+'</span>'+'元'+'</p>'
		            +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
		            +'利润：'+'<span style="color:#f48225;margin:0 6px;">'+profit_province[params.dataIndex].value+'</span>'+'元'+'</p>'
		            +'</div>'+'</div>';
		            return tipHtml;
		        }

	    },

	    visualMap: {
	        show: true,
	        min: 0,
	        max: 300000,
	        left: '10%',
	        top: 'bottom',
	        calculable: true,
	        seriesIndex: [1],
	        inRange: {
	            color: ['#04387b', '#467bc0'] // 蓝绿
	        }
	    },
	    geo: {
	        show: true,
	        map: mapName,
	        label: {
	            normal: {
	                show: false
	            },
	            emphasis: {
	                show: false,
	            }
	        },
	        roam: false,
	        itemStyle: {
	            normal: {
	                areaColor: '#023677',
	                borderColor: '#1180c7',
	            },
	            emphasis: {
	                areaColor: '#4499d0',
	            }
	        }
	    },
	    series: [{
	            name: '散点',
	            type: 'scatter',
	            coordinateSystem: 'geo',
	            data: convertData(profit_province),
	            symbolSize: function(val) {
	                return val[2]/8000;
	            },
	            label: {
	                normal: {
	                    formatter: '{b}',
	                    position: 'right',
	                    show: true
	                },
	                emphasis: {
	                    show: true
	                }
	            },
//		            animation: false,
	            itemStyle: {
	                normal: {
	                    color: '#fff'
	                }
	            }
	        },
	        {
	            type: 'map',
	            map: mapName,
	            geoIndex: 0,
	            aspectScale: 0.5, //长宽比
	            showLegendSymbol: false, // 存在legend时显示
	            label: {
	                normal: {
	                    show: true
	                },
	                emphasis: {
	                    show: false,
	                    textStyle: {
	                        color: '#fff'
	                    }
	                }
	            },
	            roam: true,
	            itemStyle: {
	                normal: {
	                    areaColor: '#031525',
	                    borderColor: '#FFFFFF',
	                },
	                emphasis: {
	                    areaColor: '#2B91B7'
	                }
	            },
	            animation: false,
	            data: sales_province
	        },
	        {
	            name: '点',
	            type: 'scatter',
	            coordinateSystem: 'geo',
	            zlevel: 6,
	        },
	        {
	            name: 'Top 5',
	            type: 'effectScatter',
//		            animation: false,
	            coordinateSystem: 'geo',
	            data: convertData(profit_province),
	            symbolSize: function(val) {
	                return val[2]/8000 ;
	            },
	            showEffectOn: 'render',
	            rippleEffect: { //涟漪特效
						period: 4, //动画时间，值越小速度越快
						brushType: 'stroke', //波纹绘制方式 stroke, fill
						scale: 4 //波纹圆环最大限制，值越大波纹越大
					},
	            hoverAnimation: true,
	            label: {
	                normal: {
	                    formatter: '{b}',
	                    position: 'left',
	                    show: false
	                }
	            },
	            itemStyle: {
	                normal: {
	                    color: 'yellow',
	                    shadowBlur: 10,
	                    shadowColor: 'yellow'
	                }
	            },
	            zlevel: 1
	        },

	    ]
	};
	myChart.setOption(option)
	var currentIndex = -1;
	setInterval(function () {
	    var dataLen = option.series[0].data.length;
	    // 取消之前高亮的图形
	    myChart.dispatchAction({
	        type: 'downplay',
	        seriesIndex: 0,
	        dataIndex: currentIndex
	    });
	    currentIndex = (currentIndex + 1) % dataLen;
	    // 高亮当前图形
	    myChart.dispatchAction({
	        type: 'highlight',
	        seriesIndex: 0,
	        dataIndex: currentIndex
	    });
	    // 显示 tooltip
	    myChart.dispatchAction({
	        type: 'showTip',
	        seriesIndex: 0,
	        dataIndex: currentIndex
	    });
	}, 1000);


	//为css类为title1的div添加文字
	var text_svg=document.getElementById("tit_pml");
	var text=document.createTextNode("2019年全年销售额共"+sales_total+"万元");
	text_svg.appendChild(text);
//	var text_svg=$('.title1').append('svg').attr('height','30px').attr('width','600px');
//
//	text_svg.append('text')
//		.attr('y',20)
//		.attr('x',0)
//		.text('2019年全年销售额共')
//		.attr('fill','#2094CA')
//		.attr('font-size',14)
//		.attr('text-anchor','left')
//		.style('font-weight','bolder');
//	text_svg.append('text')
//		.attr('x',145)
//		.attr('y',25)
//		.text(sales_total)
//		.attr('fill','#E78932')
//		.attr('font-size',24)
//		.style('font-weight','bolder');
//	text_svg.append('text')
//		.attr('x',200)
//		.attr('y',20)
//		.text('万元')
//		.attr('fill','#2094CA')
//		.attr('font-size',14)
//		.style('font-weight','bolder');
}
})
}







